import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,Select,Button,Col,Transfer,Tag,Alert, InputNumber, Radio, Modal, Cascader } from 'antd'
import style from './detail/index.less'

const FormItem = Form.Item
const Option = Select.Option

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  onCancel,
  suiteChangeFn,
  changeTarget,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    setFieldsValue,
  },
  ...modalProps
}) => {
  const {title}=modalProps
  const {productId}=modalProps
  const {level}=modalProps
  const {targetKeylist}=modalProps
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
        suite_names:targetKeylist
      }
      onOk(data)
    })
  }
  const handleCancel=()=>{
    onCancel()
  }

  const modalOpts = {
    ...modalProps,
    // onSubmit: handleOk,
  }
  const handleChange= (value) =>{
	console.log(`selected ${value}`);
  }
  const {productList}=modalProps
  const children = [];
  for (let i = 0; i < productList.length; i++) {
    children.push(<Option key={productList[i].pk}>{productList[i].fields.name}</Option>);
  }
  const {suiteList}=modalProps
  const suitechildren = [];
  for (let i = 0; i < suiteList.length; i++) {
    if(suiteList[i].fields.product_name==productId){
      suitechildren.push(<Option key={suiteList[i].pk}>{suiteList[i].fields.name}</Option>);
    }
  }
  const mockData=[];
  for (let i = 0; i < suiteList.length; i++) {
    if(level=='all' && suiteList[i].fields.product_name==productId){
      mockData.push({
        key:suiteList[i].pk,
        title: suiteList[i].fields.name,
      });
    }else if(suiteList[i].fields.product_name==productId && suiteList[i].fields.level==level){
      mockData.push({
        key:suiteList[i].pk,
        title: suiteList[i].fields.name,
      });
    }
  }
  // const targetKeys=[];
  const suiteChange=(value)=>{
    let params={
      productId:value,
      level:level?level:'all',
      targetKeylist:[]
    }
    suiteChangeFn(params)
  }
  const levelChange=(value)=>{
    let params={
      productId:productId,
      level:value,
      targetKeylist:targetKeylist
    }
    suiteChangeFn(params)
  }
  const moveChange=(targetKeys, direction, moveKeys)=> {
    changeTarget(targetKeys)
  }
  const onClose=(value)=>{
    let newlist=_.without(targetKeylist, value);
    changeTarget(newlist)
  }
  const targetTitle=(key)=>{
    for(let x = 0; x < suiteList.length; x++){
      if(suiteList[x].pk==key){
        return suiteList[x].fields.name
      }
    }
  }
  const targetChildren = [];
  for (let j = 0; j < targetKeylist.length; j++) {
    targetChildren.push(<Tag closable onClose={()=>onClose(targetKeylist[j])} key={targetKeylist[j]}>{targetTitle(targetKeylist[j])}</Tag>);
  }


  let suiteName=item.fields?item.fields.suite_names.split(','):[]
  return (
    <div>
      <Col span={14} offset={6}><h3>{title}</h3></Col>
      <Form layout="horizontal" {...modalOpts}>
        <FormItem label="名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.fields?item.fields.name:item.name,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>



        <FormItem label="产品" hasFeedback {...formItemLayout} >
          {getFieldDecorator('product_name_id', {
            initialValue: item.fields?String(item.fields.product_name):item.product_name_id,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }} onChange={suiteChange} disabled={item.fields?true:false}>
            {children}
          </Select>)}
        </FormItem>
        <FormItem label="套件等级" hasFeedback {...formItemLayout} >
          {getFieldDecorator('level', {
            initialValue: 'all',
            // rules: [
            //   {
            //     required: true,
            //   },
            // ],
          })(<Select style={{ width: '100%' }} onChange={levelChange} defaultValue="all">
            <Option key='all'>全选</Option>
            <Option key='1'>1</Option>
            <Option key='2'>2</Option>
            <Option key='3'>3</Option>
            <Option key='4'>4</Option>
          </Select>)}
        </FormItem>
        <FormItem label="套件名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('suiteNames', {
            // initialValue: item.fields?suiteName:[],
            // rules: [
            //   {
            //     required: true,
            //   },
            // ],
          })(
            <Transfer
              dataSource={mockData}
              targetKeys={targetKeylist}
              onChange={moveChange}
              // onSelectChange={this.handleSelectChange}
              render={item => item.title}
            />


          )}
        </FormItem>
        <FormItem wrapperCol={{ span: 14, offset: 6 }} hasFeedback style={{ marginTop: 24 }}>
          {targetChildren}

        </FormItem>
        <FormItem label="描述" hasFeedback {...formItemLayout}>
          {getFieldDecorator('description', {
            initialValue: item.fields?item.fields.description:'',

          })(<Input />)}
        </FormItem>
        <FormItem label="pk" hasFeedback {...formItemLayout} className={style.hiddentype}>
          {getFieldDecorator('pk', {
            initialValue: item.pk,
          })(<Input disabled/>)}
        </FormItem>
        <FormItem wrapperCol={{ span: 14, offset: 6 }} style={{ marginTop: 24 }}>
          <Button type="primary" onClick={handleOk}>提交</Button>
          <Button type="default" onClick={handleCancel} style={{marginLeft:'10'}}>取消</Button>
        </FormItem>
      </Form>
    </div>

  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
